<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
      crossorigin="anonymous"
    />
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
      integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <button id="add">添加</button>
    <div>
      名字： <input type="text" id="username" /> 邮箱：<input
        type="text"
        id="email"
      />
      密码：<input type="text" id="pwd" />
      <button id="sub">保存</button>
    </div>
    <table class="table table-bordered" style="width: 800px; margin: 30px auto">
      <thead>
        <tr>
          <th>ID</th>
          <th>名 字</th>
          <th>邮 箱</th>
          <th>密 码</th>
          <th>注册时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <nav aria-label="Page navigation" style="transform: translate(40%)">
      <ul class="pagination">
        <li>
          <a href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>

        <li>
          <a href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
    <script>
      var page = 20,
        allData,
        thisPage = 1,
        pageNum = 0
      $(function () {
        getData()
        $('#sub').click(function () {
          $.ajax({
            url: 'http://test2022.com/register',
            method: 'POST',
            dataType: 'json',
            data: {
              username: $('#username').val(),
              email: $('#email').val(),
              pwd: $('#pwd').val(),
            },
            success: function (res) {
              console.log(res)
            },
          })
        })
      })
      function getData() {
        $("[aria-label='Previous']").click(function () {
          if (thisPage == 1) {
            return
          } else {
            updata(thisPage - 1)
          }
        })
        $("[aria-label='Next']").click(function () {
          if (thisPage == pageNum) {
            return
          } else {
            updata(thisPage + 1)
          }
        })
        $.ajax({
          url: 'https://liu.zzgoodqc.cn/users',
          method: 'GET',
          dataType: 'json',
          success: function (res) {
            var str = ''
            allData = res.data
            updata(1)
            pageNum = Math.ceil(allData.length / 20) //获取总页数
            var strLi = ''
            for (var i = 1; i <= pageNum; i++) {
              strLi += `<li><a href="#" onclick="updata(${i})">${i}</a></li>`
            }
            $('li:first').after(strLi)
          },
        })
      }
      function updata(pages) {
        //start=(当前页-1)*每页的数量 ,end = 当前页*每页数量
        var data = allData.slice((pages - 1) * 20, pages * 20),
          str = ''
        thisPage = pages
        for (let i in data) {
          str += `  <tr>
                        <td>${data[i].id}</td>
                        <td>${data[i].name}</td>
                        <td>${data[i].email}</td>
                        <td>${data[i].password}</td>
                        <td>${data[i].created_at}</td>
                        <td>编辑|删除</td>
                    </tr>`
        }
        $('tbody').html(str)
      }
    </script>
  </body>
</html>
